<html>
    <title>lesson1</title>
    <style>

        div{
            margin: 20px;
            background-color: red;
            width: 100px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            font-size: 22px;
            /* float: left; */
        }
        .h60{
            height: 60px;
        }
        .fl{
            float: left;
        }
        .fr{
            float: right;
        }
        .bg{
            background-color: royalblue;
        }
        .mL40{
            margin-left:40px;
        }
        .mL150{
            margin-left: 150px;
        }
        .cle{
            clear: both;
        }
    </style>
    <body>
        <div>111</div>
        <div class="fl bg mL40">222</div>
        <div>333</div>
        <div class="fr cle">444</div>
        <div>555</div>
        <div>666</div>
    </body>
</html>